<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <link th:href="@{/css/bootstrap/3.3.6/bootstrap.css}" rel='stylesheet' type='text/css' />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--webfont-->
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery/2.0.0/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.easydropdown.js}"></script>
    <!--Animation-->
    <script th:src="@{/js/wow.min.js}"></script>
    <link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css'/>
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a th:href="@{/user/toIndex}"><img th:src="@{/images/hotel/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="#"><img th:src="@{/images/hotel/nav.png}" alt="" /></a>
            <ul class="nav" id="nav">
                <li class="active"><a th:href="@{/user/toIndex}">主页</a></li>
                <li><a th:href="@{/user/toRooms}">房间</a></li>
                <li><a th:href="@{/room/searchRoom}">搜索</a></li>
                <li><a th:href="@{/user/toGallery}">酒店</a></li>
                <li><a id="toCenter" th:href="@{/user/userCenter}">个人中心</a></li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
        <!-- start search-->
        <div class="search-box">
            <div id="sb-search" class="sb-search">
                <form>
                    <input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
                    <input class="sb-search-submit" type="submit" value="">
                    <span class="sb-icon-search"> </span>
                </form>
            </div>
        </div>
        <!----search-scripts---->
        <script th:src="@{/js/classie.js}"></script>
        <script th:src="@{/js/uisearch.js}"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>
        <!----//search-scripts---->
        <div class="clearfix"></div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer">
            <a href="#" id="loginButton " class="selectPwd"><img th:src="@{/images/hotel/login.png}">
                <span th:if="${session.person != null}" id="logins" th:value="${session.person}" th:text="${session.person.userName}"></span>
                <span th:if="${session.person == null}">手机登录</span>
            </a>
            <a href="#" id="loginButton2 " class="selectPhone">
                <span th:if="${session.person == null}">密码登录</span>
                <span th:if="${session.person != null}" > </span>
            </a>


            <a th:href="@{/pages/toRegist}" id="registButton" >
                <span th:if="${session.person == null}">注  册</span>
                <span th:if="${session.person != null}" ></span>
            </a>


            <!--author：王畅-->
            <!--新增用户收藏夹-->
            <a th:href="'/Collection/show?id='+${session?.userId}" methods="post">
                <span th:if="${session.person != null} " >我的收藏</span>
                <span th:if="${session.person == null}"></span>
            </a>



            <a th:href="@{/user/logout}" id="logoutButton">
                <span th:if="${session.person != null}">退  出</span>
                <span th:if="${session.person == null}" ></span>
            </a>


            <div id="loginBox" >

                    <form  id="loginForm" th:method="POST">
                        <fieldset id="body">
                            <fieldset>
                                <label for="userPhone">手机号</label>
                                <input type="text" name="userPhone" id="userPhone">
                            </fieldset>
                            <fieldset>
                                <label for="phoneCode">请输入验证码</label>
                                <input type="text" name="phoneCode" id="phoneCode">
                            </fieldset>
                            <input  id="login" value="登录">
                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
                        </fieldset>
                        <span><a href="" class="text" id="getCodes">获取验证码</a></span>
                    </form>
            </div>
            <div id="loginBox2" style="display: none;">
                <form  id="loginForm2"  th:method="POST">
                    <fieldset id="body1">
                        <fieldset>
                            <label for="userName">用户名</label>
                            <input type="text" name="userName" id="userName">
                        </fieldset>
                        <fieldset>
                            <label for="userPassword">用户密码</label>
                            <input type="text" name="userPassword" id="userPassword">
                        </fieldset>
                        <input  type="submit" id="login2" value="登录">
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="banner">
    <div class="container_wrap">
        <h1>What are you looking for?</h1>
        <form th:action="@{/room/listbyhotelname}" method="post">
            <input name="hotelName"  type="text" value="酒店关键词" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '酒店关键词';}">
            <div class="contact_btn">
                <label class="btn1 btn-2 btn-2g"><input name="submit" type="submit" id="submit" value="Search"></label>
            </div>

        </form>

        <div class="contact_btn">
            <a th:href="@{/room/SearchByRoomType}">  <label class="btn1 btn-2 btn-2g">按房型搜索
            </label></a>
            <a th:href="@{/room/SearchByCity}"><label class="btn1 btn-2 btn-2g">按城市搜索</label></a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="content_top">
    <div class="container">
        <div class="col-md-4 bottom_nav">
            <div class="content_menu">
                <ul>
                    <li class="active"><a href="#">Recommended</a></li>
                    <li><a href="#">Latest</a></li>
                    <li><a href="#">Highlights</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 content_dropdown1">
            <div class="content_dropdown">
                <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
                    <option value="0">Dubai</option>
                    <option value="1">tempor</option>
                    <option value="2">congue</option>
                    <option value="3">maxim </option>
                    <option value="4">mutationem</option>
                    <option value="5">hendrerit </option>
                    <option value="5"></option>
                    <option value="5"></option>
                </select>
            </div>
            <div class="content_dropdown">
                <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
                    <option value="0">Show Map</option>
                    <option value="1">tempor</option>
                    <option value="2">congue</option>
                    <option value="3">maxim </option>
                    <option value="4">mutationem</option>
                    <option value="5">hendrerit </option>
                    <option value="5"></option>
                    <option value="5"></option>
                </select>
            </div>
        </div>
        <div class="col-md-4 filter_grid">
            <ul class="filter">
                <li class="fil">Filter :</li>
                <li><a href=""> <i class="icon1"> </i> </a></li>
                <li><a href=""> <i class="icon2"> </i> </a></li>
                <li><a href=""> <i class="icon3"> </i> </a></li>
                <li><a href=""> <i class="icon4"> </i> </a></li>
                <li><a href=""> <i class="icon5"> </i> </a></li>
            </ul>
        </div>
    </div>
</div>
<div class="content_middle">
    <div class="container">
        <div class="content_middle_box">
            <div class="middle_grid wow fadeInUp" data-wow-delay="0.4s" >
                <div class="col-md-6 index-grids" th:each=" hotel : ${hotels}">
                    <div class="grid1">
                        <div class="index_img"><img th:src="@{'/myFile/'+${hotel.hotelImg}}" class="img-responsive" alt=""/></div>
                        <ul class="vision">
                            <li></li>
                        </ul>
                        <div class="inner_wrap1">
                            <ul class="item_module">
                                <li class="module_right">
                                    <img th:src="@{/images/hotel/m_star.png}" class="img-responsive" alt=""/>
                                    <h5  th:text="${hotel.hotelName}"></h5>
                                    <p th:text="${hotel.hotelAddr}"></p>
                                    <a th:href="@{/pages/hotelShow(id=${hotel.hotelId})}" class="content_btn">....了解更多</a>
                                </li>
                                <div class="clearfix"> </div>
                            </ul>
                        </div>
                    </div>
                </div>
<!--
                <div class="col-md-6 index-grids">
                    <div class="grid1">
                        <div class="index_img1"><img th:src="@{/images/hotel/pic5.jpg}" class="img-responsive" alt=""/></div>
                        <i class="m_home1"> </i>
                        <ul class="vision">
                            <li>Vision Agency</li>
                            <li class="desc"><a href="#"> <img th:src="@{/images/hotel/star2.png}" alt="">(236)</a></li>
                        </ul>
                        <div class="inner_wrap1">
                            <ul class="item_module">
                                <li class="module_left"><img th:src="@{/images/hotel/m2.jpg}" class="img-responsive" alt=""/></li>
                                <li class="module_right">
                                    <img th:src="@{/images/hotel/m_star1.png}" class="img-responsive" alt=""/>
                                    <h5>Lucy-p</h5>
                                    <p>"Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."</p>
                                    <a href="single.html" class="content_btn">....read more</a>
                                </li>
                                <div class="clearfix"> </div>
                            </ul>
                        </div>
                    </div>
                </div>
-->
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="offering">
            <h2>What can Hotel Deluxe offer to you ?</h2>
            <h3>Ut wisi enim ad minim veniam, quis</h3>
            <ul class="icons wow fadeInUp" data-wow-delay="0.4s">
                <li><i class="icon1"> </i><span class="one"> </span></li>
                <li><i class="icon2"> </i><span class="two"> </span></li>
                <li><i class="icon3"> </i><span class="three"> </span></li>
                <li><i class="icon4"> </i><span class="four"> </span></li>
                <li><i class="icon5"> </i></li>
            </ul>
            <div class="real">
                <h4>Reality</h4>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s1"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod maxim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum</p>
                        </li>
                        <div class="clearfix"> </div>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s2"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod maxim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum</p>
                        </li>
                        <div class="clearfix"> </div>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="footer">
    <div class="container">
        <div class="footer_top">
            <h3>Subscribe to our newsletter</h3>
            <form>
		<span>
			<i><img th:src="@{/images/hotel/mail.png}" alt=""></i>
		    <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit1" value="Subscribe"> </label>
		    <div class="clearfix"> </div>
		</span>
            </form>
        </div>
        <div class="footer_grids">
            <div class="footer-grid">
                <h4>Ipsum Quis</h4>
                <ul class="list1">
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="#">Mirum est</a></li>
                    <li><a href="#">Placerat facer</a></li>
                    <li><a href="#">Claritatem</a></li>
                    <li><a href="#">Sollemnes </a></li>
                </ul>
            </div>
            <div class="footer-grid">
                <h4>Quis Ipsum</h4>
                <ul class="list1">
                    <li><a href="#">Placerat facer</a></li>
                    <li><a href="#">Claritatem</a></li>
                    <li><a href="#">Sollemnes </a></li>
                    <li><a href="#">Claritas</a></li>
                    <li><a href="#">Mirum est</a></li>
                </ul>
            </div>
            <div class="footer-grid last_grid">
                <h4>Follow Us</h4>
                <ul class="footer_social wow fadeInLeft" data-wow-delay="0.4s">
                    <li><a href=""> <i class="fb"> </i> </a></li>
                    <li><a href=""><i class="tw"> </i> </a></li>
                    <li><a href=""><i class="google"> </i> </a></li>
                    <li><a href=""><i class="u_tube"> </i> </a></li>
                </ul>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>
</body>

<!--贤客服-->
<script>



    (function(w, d, s, g, o) {
        var x = document.createElement(s)
            ,s = document.getElementsByTagName(s)[0];
        w[g] = o;
        x.async = true;
        x.charset = 'utf-8';
        x.src = 'https://cdn.xiankefu.com/dist/xiankefu.js';
        s.parentNode.insertBefore(x, s);
    })(window, document, 'script', 'XIANKEFU_GLOBAL', {
        bid: '5941993e9045aa88173695643593df5f'
        ,csid: 'f1262ed937c2ccc2a9ec3ec0d3b04092'
    });



</script>

</body>

<script th:src="@{/layui/layui.all.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".collect").click(function () {
            var hotelid=$(this).val();
            var userid=[[${session.userId}]]
            $.ajax({
                url: "/Collection/add",
                data: {
                    userId:userid,
                    hotelId:hotelid
                },
                type: "post",
                success: function (data) {
                    if (data=="ok"){
                        layer.msg("收藏成功!",{time:1000});
                    } else if (data=="error"){
                        layer.msg("收藏失败!",{time:1000});
                    }
                }
            });
            return false;
        });


    })




    $(".selectPhone").click(function () {
        $("#loginBox2").css("display","block");
        $("#loginBox").css("display","none");
    });
    $(".selectPwd").click(function () {
        $("#loginBox").css("display","block");
        $("#loginBox2").css("display","none");
    });









    /***
     * 获取短信验证码并判断
     */
    $("#getCodes").click(function () {
        var user_phone = $('#userPhone').val();
        $.ajax({
            url: "/user/getCode",
            data:{
                "user_phone":user_phone
            },
            type: "post",
            success:function (data) {
                if (data=="ok"){
                    layer.msg("验证码已发送", {time:1000,icon: 5});
                }else if (data == "error"){
                    layer.msg("该手机号还未注册",{time:1000,icon: 5});
                }
                else if (data == "failed"){
                    layer.msg("短信发送失败",{time:1000,icon: 5});
                }
            },
            error:function () {
                layer.msg("服务器出错",{time:1000,icon: 5});
            }
        });
        return false;
    })




    /***
     * 短信验证码登录
     */
    $("#login").click(function () {
        var str=$("#phoneCode").val();
        var user_phone = $('#userPhone').val();
        $.ajax({
            url: "/user/checkCode",
            data:{
                inputCode:str,
                user_phone:user_phone
            },
            success: function(data) {
                if (data=="true"){
                    layer.msg("登陆成功!",{time:1000},function () {
                        location.reload();
                    })
                }else if(data=="false"){
                    layer.msg("验证码错误!",{time:1000,icon: 5},function () {

                    })
                }
            },
            error:function () {
                alert("请输入验证码")
            }
        })
        return false;
    });


    $(function () {
        $("#login2").click(function (data) {
            var name = $("#userName").val();
            var pwd = $("#userPassword").val();
            $.ajax({
                url:'/user/welcome',
                method:'POST',
                data:{
                    'userName':name,
                    'userPassword':pwd
                },
                success:function (data) {
                    if (data=="true"){
                        layer.msg("登陆成功!",{time:1000},function () {
                            location.reload();
                        })
                    }else if(data=="false"){
                        layer.msg("账户密码错误!",{time:1000,icon: 5},function () {

                        })
                    }
                },
                error:function () {
                    alert("ERROR!");
                }
            })
        })


        $('#loginButton').click(function () {
            var test = $('#logins').val();
            if(test!=null){
                $('#loginBox').remove();
            }
        })


        $("#toCenter").click(function () {
            $.ajax({
                url: "/user/userCenter",
                type: "post",
                success:function(data) {
                    if(data.code>0){
                    }else
                        layer.msg("请先登录",{time:1000},function () {
                            location.href="/pages/toHotel";
                        });

                }
            })
        })
    })
</script>


</html>